<template>
  <div id="cake">
    <div class="outer">
      <div class="list-one" @click="seletgoods1">
        <i>场 景：</i>
        <span class="pick pick1-now">全部</span>
        <span class="pick">生日</span>
        <span class="pick">聚会</span>
        <span class="pick">情侣</span>
        <span class="pick">儿童</span>
        <span class="pick">长辈</span>
        <span class="pick">下午茶</span>
      </div>
      <div class="list-two" @click="seletgoods2">
        <i>口 味：</i>
        <span class="pick pick1-now">全部</span>
        <span class="pick">拿破仑</span>
        <span class="pick">奶油</span>
        <span class="pick">慕斯</span>
        <span class="pick">芝士</span>
        <span class="pick">巧克力</span>
        <span class="pick">咖啡</span>
        <span class="pick">坚果</span>
        <span class="pick">水果</span>
        <span class="pick">冰淇淋</span>
      </div>
    </div>
    <div>
      <div class="out">
        <div
          class="box"
          v-for="item in this.$store.state.cakeArr"
          :key="item.goods_id"
        >
          <img
            :src="$store.state.url + item.goods_coverimg"
            alt="图片失效"
            class="photos"
          />
          <h3>
            {{ item.goods_name
            }}<span class="label" v-if="item.goods_label">{{
              item.goods_label
            }}</span>
            =
          </h3>
          <h4>{{ item.goods_english }}</h4>
          <p>
            <span class="price"
              ><i class="rmb">￥</i>{{ item.goods_price }}</span
            >

            <img
              src="./img/car.png"
              alt=""
              class="add-car"
              @click="changeisclickcar(item.goods_id)"
            />
          </p>
          <addcar v-if="$store.state.isclickcar">
            <template slot="img">
              <img :src="$store.state.url + item.goods_coverimg" alt="" />
            </template>
            <template slot="text">{{ item.goods_name }}</template>
            <template slot="price">￥{{ item.goods_price }} </template>
            <template slot="cancel"
              ><span @click="changeisclickcar">取消</span></template
            >
          </addcar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import addcar from "../ljy/addcar/addcar.vue";

export default {
  components: {
    addcar,
  },

  data() {
    return {};
  },
  methods: {
    async seletgoods1(e) {
      let value = e.target.innerHTML;
      let res = await this.axios(`/ls/getscene?value=${value}`);
      this.$store.commit("changecakeArr", res.data);
    },
    async seletgoods2(e) {
      let value = e.target.innerHTML;
      let res = await this.axios(`/ls/gettaste?value=${value}`);
      this.$store.commit("changecakeArr", res.data);
    },
    async changeisclickcar(goods_id) {
      this.$store.commit("changeGoodsid", goods_id);
      this.$store.commit("changeIsclickcar");
    },
  },
  mounted() {
    this.$store.commit('changeTypeNmame', 'cake')
  },
};
</script>
<style scoped>
#cake{
  width: 100%;
  display: inline-block;
}
.outer {
  width: 1450px;
  height: 118px;
  padding-top: 60px;
  padding-left: 130px;
  margin: 0 auto 24px;
  background: #fff;
}
.pick {
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  width: 65px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  margin-right: 22px;
  cursor: pointer;
  color: #000;
  font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
}
.pick i {
  display: inline-block;
  width: 78px;
  text-align: left;
  font-style: normal;
}
.pick1-now {
  background: #ffe32a;
  margin-bottom: 14px;
}
#cake {
  margin-top: 140px;
}
.out {
  width: 1480px;
  margin: 0 auto 50px;
}
.box {
  float: left;
  width: 350px;
  padding-top: 20px;
  margin-left: 16px;
  margin-bottom: 20px;
}
.photos {
  width: 350px;
  height: 350px;
  margin-bottom: 12px;
}
h3 {
  font-size: 15px;
  color: #000;
  margin-bottom: 6px;
}
h4 {
  font-weight: normal;
  font-size: 12px;
  color: #7a7a7a;
  height: 5px;
}
.add-car {
  float: right;
  margin-right: 38px;
  cursor: pointer;
}
.price {
  font-weight: 500;
  font-size: 18px;
  color: #000;
  float: left;
  position: relative;
  top: 12px;
  left: -4px;
}
.label {
  background-color: #ffe32a;
  padding: 2px 8px;
  margin-left: 8px;
}
</style>